<template>
  <ul
    class="column"
    :class="{ stripe }"
  >
    <li>{{ label }}</li>
    <li
      v-for="(item, i) in data"
      :key="i + item"
    >
      <slot
        :index="i"
        :row="item"
        >{{ item }}</slot
      >
    </li>
  </ul>
</template>
<script>
export default {
  name: 'ComponentName',
  props: {
    label: {
      type: String,
      default() {
        return ''
      },
    },
    stripe: {
      type: Boolean,
      default() {
        return false
      },
    },
    data: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {}
  },
  computed: {},
  methods: {},
  components: {},
  filters: {},
  watch: {},
  created() {},
  mounted() {},
}
</script>
<style lang="less" scoped>
.stripe {
  li {
    background-color: rgba(122, 122, 122, 0.3);
    &:nth-child(2n) {
      background-color: rgba(188, 188, 255, 0.3);
    }
  }
}
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  li {
    padding-left: 20px;
    height: 50px;
    width: 100%;
    line-height: 50px;
  }
}
</style>
